<template>
  <div class='login'>
    <div class='header'>
      <canvas class='illo'></canvas>
    </div>
    <div class='loginPart'>
      <h2>用户登录</h2>
      <el-form ref='loginForm' :model='formLogin' :rules='rules'>
        <!-- <div class="inputElement">
          <el-input v-model="formLogin.username" placeholder="请输入账号"></el-input>
        </div> -->
        <el-form-item prop='username'>
          <div class='divs' style=''>
            <input v-model='formLogin.username' autocomplete='off' class='inputs' placeholder='请输入账号'
                   type='text' />
            <span></span>
          </div>
        </el-form-item>
        <el-form-item prop='password'>
          <div class='divs' style=''>
            <input
              v-model='formLogin.password'
              autocomplete='off'
              class='inputs'
              placeholder='请输入密码'
              type='password'
              @keyup.enter='submit' />
            <span></span>
          </div>
        </el-form-item>
        <!-- 验证码 -->
        <!-- <el-form-item prop="code">
          <div style="display:flex;width: 100%;">
            <div style="width: 70%;" class="divs">
              <input type="text" placeholder="验证码" v-model="formLogin.code" class="inputs" @keyup.enter="submit">
              <span></span>
            </div>
            验证码
            <img :src="src" alt="" @click="getCode">
          </div>
        </el-form-item> -->
        <!-- <div class="inputElement">
          <el-input v-model="formLogin.password" placeholder="请输入密码"></el-input>
        </div> -->
        <div class='page-login-btn'>
          <button @click='submit'>login</button>
        </div>
      </el-form>
    </div>
  </div>
</template>


<script>
import Zdog from 'zdog'
import { mapActions } from 'vuex'
import localeMixin from '@/locales/mixin.js'
import setting from '@/setting'
import util from '@/libs/util'

export default {
  mixins: [localeMixin],
  data() {
    return {
      timeInterval: null,
      // 快速选择用户
      // 表单
      isLogin: false,
      formLogin: {
        username: '',
        password: '',
        // code: '',
      },
      // 验证码
      // src: setting.appInfo.baseUrl + 'user/code/1',
      // 表单校验
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {

  },
  mounted() {
    this.onread()

    if (setting.env == 'development') {
      this.formLogin = {
        username: '18691396521',
        password: '123456',
      }
    }
    // this.getCode()
  },
  beforeDestroy() {
  },
  methods: {
    ...mapActions('d2admin/account', ['login']),
    /**
     * @description 提交表单
     */
    async submit() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          let request = {
            phone: this.formLogin.username,
            password: this.formLogin.password,
          }
          util.cookies.set('uuid', '123')
          util.cookies.set('token', 'token')
          // 储存用户信息
          this.login({ name: '橘子' })
          this.$message.success('登录成功')
          this.$router.replace(this.$route.query.redirect || '/')

          return
          let res = await this.$api.user.login(request)
          // 设置 cookie 一定要存 uuid 和 token 两个 cookie
          // 整个系统依赖这两个数据进行校验和存储
          // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
          // token 代表用户当前登录状态 建议在网络请求中携带 token
          // 如有必要 token 需要定时更新，默认保存一天
          util.cookies.set('uuid', res.data.id)
          util.cookies.set('token', res.data.token)
          //获取用户信息
          let user = await this.$api.user.find(res.data.id)
          // 储存用户信息
          this.login(user.data)
          this.$message.success('登录成功')
          this.$router.replace(this.$route.query.redirect || '/')
        } else {
          // 登录表单校验失败
          this.$message.error('表单校验失败')
        }
      })
    },
    // 获取验证码
    getCode() {
      this.src = setting.appInfo.baseUrl + 'user/code/' + Math.random()
    },

    onread() {
      // Made with Zdog
      var BokehShape = Zdog.Shape.subclass({
        bokehSize: 5,
        bokehLimit: 64,
      })

      BokehShape.prototype.updateBokeh = function() {
        // bokeh 0 -> 1
        this.bokeh = Math.abs(this.sortValue) / this.bokehLimit
        this.bokeh = Math.max(0, Math.min(1, this.bokeh))
        return this.bokeh
      }

      BokehShape.prototype.getLineWidth = function() {
        return this.stroke + this.bokehSize * this.bokeh * this.bokeh
      }

      BokehShape.prototype.getBokehAlpha = function() {
        var alpha = 1 - this.bokeh
        alpha *= alpha
        return alpha * 0.8 + 0.2
      }

      BokehShape.prototype.renderCanvasDot = function(ctx) {
        this.updateBokeh()
        ctx.globalAlpha = this.getBokehAlpha() // set opacity
        Zdog.Shape.prototype.renderCanvasDot.apply(this, arguments)
        ctx.globalAlpha = 1 // reset
      }

      BokehShape.prototype.renderPath = function(ctx, renderer) {
        this.updateBokeh()
        // set opacity
        if (renderer.isCanvas) {
          ctx.globalAlpha = this.getBokehAlpha()
        }
        Zdog.Shape.prototype.renderPath.apply(this, arguments)
        // reset opacity
        if (renderer.isCanvas) {
          ctx.globalAlpha = 1
        }
      }

      var TAU = Zdog.TAU

      function makeMadeline(isGood, colors, options) {
        var rotor = new Zdog.Anchor(options)

        var body = new Zdog.Group({
          addTo: rotor,
          rotate: { x: -TAU / 8 },
          translate: { z: -48 },
          updateSort: true,
        })

        var head = new Zdog.Anchor({
          addTo: body,
          translate: { y: -11, z: -2 },
          rotate: { x: TAU / 8 },
        })

        // face
        var face = new Zdog.Ellipse({
          diameter: 6,
          addTo: head,
          translate: { z: 4 },
          stroke: 8,
          color: colors.skin,
        })

        var eyeGroup = new Zdog.Group({
            addTo: face,
            translate: { z: face.stroke / 2 - 0.5 },
          })

          // eyes
        ;[-1, 1].forEach(function(xSide) {
          // cheek blush
          if (isGood) {
            new Zdog.Ellipse({
              width: 2,
              height: 1.3,
              addTo: eyeGroup,
              translate: { x: 4.5 * xSide, y: 3, z: -1 },
              rotate: { y: (-TAU / 16) * xSide },
              stroke: 1,
              color: '#FA8',
              fill: true,
            })
          }

          var eyeX = 3.5 * xSide

          // eye
          new Zdog.Ellipse({
            width: 0.75,
            height: 1.5,
            addTo: eyeGroup,
            color: colors.eye,
            translate: { x: eyeX },
            stroke: 2,
            fill: true,
          })

          // eye brow
          new Zdog.Ellipse({
            addTo: eyeGroup,
            height: 3,
            width: 1.2,
            quarters: 2,
            translate: { x: eyeX, y: -3 },
            rotate: { z: -TAU / 4 + 0.15 * xSide * (isGood ? 1 : -1) },
            color: colors.hair,
            stroke: 1,
            fill: false,
            closed: true,
          })
        })

        // hair ball
        new Zdog.Shape({
          path: [{ x: -1 }, { x: 1 }, { z: -4 }],
          addTo: head,
          translate: { y: -4, z: -1 },
          stroke: 18,
          color: colors.hair,
        })

        var bang = new Zdog.Shape({
          path: [
            {},
            {
              arc: [
                { z: 4, y: 4 },
                { z: 0, y: 8 },
              ],
            },
          ],
          addTo: head,
          translate: { x: 2, y: -7.5, z: 6 },
          rotate: { x: 0.5, z: -0.5 },
          stroke: 4,
          color: colors.hair,
          closed: false,
        })
        bang.copy({
          translate: { x: 5, y: -6, z: 5 },
          rotate: { x: -0.3, z: -0.5 },
        })
        bang.copy({
          translate: { x: 5, y: -6, z: 3 },
          rotate: { y: -0.7, z: -1 },
        })

        // left side
        bang.copy({
          translate: { x: -2, y: -7.5, z: 6 },
          rotate: { x: 0, z: (TAU / 16) * 6 },
        })
        bang.copy({
          translate: { x: -5, y: -6, z: 5 },
          rotate: { x: 0, z: TAU / 4 },
        })
        bang.copy({
          translate: { x: -5, y: -6, z: 3 },
          rotate: { y: 0.7, z: 1 },
        })

        // hair cover
        new Zdog.Shape({
          path: [{ x: -3 }, { x: 3 }],
          addTo: head,
          stroke: 7,
          translate: { y: -8, z: 5 },
          color: colors.hair,
        })

        // trail locks

        var trailLock = new Zdog.Shape({
          path: [
            { y: -4, z: 0 },
            {
              bezier: [
                { y: -10, z: -14 },
                { y: 0, z: -16 },
                { y: 0, z: -26 },
              ],
            },
          ],
          addTo: head,
          translate: { z: -4, y: 0 },
          stroke: 10,
          color: colors.hair,
          closed: false,
        })

        trailLock.copy({
          translate: { x: -3, z: -4 },
          rotate: { z: -TAU / 8 },
          stroke: 8,
        })
        trailLock.copy({
          translate: { x: 3, z: -4 },
          rotate: { z: TAU / 8 },
          stroke: 8,
        })
        trailLock.copy({
          translate: { y: 2 },
          // rotate: { z: TAU/2 },
          scale: { y: 0.5 },
          stroke: 8,
        })

        // ----- torso ----- //

        // 2nd rib
        var torsoRib = new Zdog.Ellipse({
          width: 12,
          height: 10,
          addTo: body,
          rotate: { x: -TAU / 4 },
          translate: { y: -1 },
          stroke: 6,
          color: colors.parkaLight,
          fill: true,
        })
        // neck rib
        torsoRib.copy({
          width: 6,
          height: 6,
          translate: { y: -5 },
        })
        // 3rd rib
        torsoRib.copy({
          translate: { y: 3 },
        })
        // 4th rib
        torsoRib.copy({
          translate: { y: 7 },
          color: colors.parkaDark,
        })
        // waist
        new Zdog.Ellipse({
          width: 10,
          height: 8,
          addTo: body,
          rotate: { x: -TAU / 4 },
          translate: { y: 11 },
          stroke: 4,
          color: colors.tight,
          fill: true,
        })

        // arms
        ;[-1, 1].forEach(function(xSide) {
          var isLeft = xSide == 1
          // shoulder ball
          new Zdog.Shape({
            addTo: body,
            stroke: 6,
            translate: { x: 6 * xSide, y: -5, z: -1 },
            color: colors.parkaLight,
          })

          var shoulderJoint = new Zdog.Anchor({
            addTo: body,
            translate: { x: 9 * xSide, y: -3, z: -2 },
            rotate: isLeft ? { x: (TAU / 8) * 3, z: -TAU / 32 } : { z: (TAU / 16) * 2, x: (-TAU / 16) * 2 },
          })

          // top shoulder rib
          var armRib = new Zdog.Ellipse({
            diameter: 2,
            rotate: { x: -TAU / 4 },
            addTo: shoulderJoint,
            translate: { x: 0 * xSide },
            stroke: 6,
            color: colors.parkaLight,
            fill: true,
          })
          armRib.copy({
            translate: { y: 4 },
          })

          var elbowJoint = new Zdog.Anchor({
            addTo: shoulderJoint,
            translate: { y: 8 },
            rotate: isLeft ? {} : { z: TAU / 8 },
          })

          armRib.copy({
            addTo: elbowJoint,
            translate: { x: 0, y: 0 },
          })
          armRib.copy({
            addTo: elbowJoint,
            translate: { y: 4 },
            color: colors.parkaDark,
          })

          // hand
          new Zdog.Shape({
            addTo: elbowJoint,
            translate: { y: 9, z: -1 },
            stroke: 8,
            color: colors.skin,
          })

          // ----- legs ----- //
          var knee = { y: 7 }
          var thigh = new Zdog.Shape({
            path: [{ y: 0 }, knee],
            addTo: body,
            translate: { x: 4 * xSide, y: 13 },
            rotate: isLeft ? {} : { x: (TAU / 16) * 3, z: TAU / 16 },
            stroke: 8,
            color: colors.tight,
          })

          var shin = new Zdog.Shape({
            path: [{ y: 0 }, { y: 8 }],
            addTo: thigh,
            stroke: 6,
            translate: knee,
            rotate: isLeft ? {} : { x: (-TAU / 16) * 5 },
            color: colors.tight,
          })
        })

        // butt
        new Zdog.Shape({
          path: [{ x: -3 }, { x: 3 }],
          visible: false,
          addTo: body,
          translate: { y: 11, z: -2 },
          stroke: 8,
          color: colors.tight,
        })
      }

      window.makeBird = function(options) {
        var spin = options.spin || 0

        var arrow = new Zdog.Anchor({
          addTo: options.addTo,
          scale: 2 / 3,
          rotate: { z: spin },
        })

        var bird = new Zdog.Group({
          addTo: arrow,
          translate: { x: 87 },
          rotate: { x: -spin },
        })

        // bird body
        new Zdog.Shape({
          path: [
            { x: -3, y: 0 },
            {
              arc: [
                { x: -2, y: 1.5 },
                { x: 0, y: 1.5 },
              ],
            },
            {
              arc: [
                { x: 2, y: 1.5 },
                { x: 2, y: 0 },
              ],
            },
          ],
          addTo: bird,
          translate: { x: 0.5 },
          stroke: 3,
          color: options.color,
          fill: true,
        })

        // bird head
        new Zdog.Shape({
          translate: { x: 4, y: -1 },
          addTo: bird,
          stroke: 4,
          color: options.color,
        })

        // beak
        new Zdog.Shape({
          path: [
            { x: 0, y: -1 },
            { x: 3, y: 0 },
            { x: 0, y: 1 },
          ],
          addTo: bird,
          translate: { x: 5, y: -1 },
          stroke: 1,
          color: options.color,
          fill: true,
        })

        // tail feather
        new Zdog.Shape({
          path: [
            { x: -3, z: -2 },
            { x: 0, z: 0 },
            { x: -3, z: 2 },
          ],
          addTo: bird,
          translate: { x: -4, y: 0 },
          stroke: 2,
          color: options.color,
          fill: true,
        })

        var wing = new Zdog.Shape({
          path: [
            { x: 3, y: 0 },
            { x: -1, y: -9 },
            {
              arc: [
                { x: -5, y: -4 },
                { x: -3, y: 0 },
              ],
            },
          ],
          addTo: bird,
          translate: { z: -1.5 },
          rotate: { x: TAU / 8 },
          stroke: 1,
          color: options.color,
          fill: true,
        })

        wing.copy({
          translate: { z: 1.5 },
          scale: { z: -1 },
          rotate: { x: -TAU / 8 },
        })
      }

      // -------------------------- demo -------------------------- //

      var illoElem = document.querySelector('.illo')
      var w = 160
      var h = 160
      var minWindowSize = Math.min(window.innerWidth, window.innerHeight)
      var zoom = Math.min(3, Math.floor(minWindowSize / w))
      illoElem.setAttribute('width', w * zoom)
      illoElem.setAttribute('height', h * zoom)

      var isSpinning = true
      var TAU = Zdog.TAU

      var illo = new Zdog.Illustration({
        element: illoElem,
        zoom: zoom,
        rotate: { y: -TAU / 4 },
        dragRotate: true,
        onDragStart: function() {
          isSpinning = false
        },
      })

      var madColor = {
        skin: '#FD9',
        hair: '#D53',
        parkaLight: '#67F',
        parkaDark: '#35D',
        tight: '#742',
        eye: '#333',
      }
      var badColor = {
        skin: '#EBC',
        hair: '#D4B',
        parkaLight: '#85A',
        parkaDark: '#527',
        tight: '#412',
        eye: '#D02',
      }

      var glow = 'hsla(60, 100%, 80%, 0.3)'
      var featherGold = '#FE5'

      // -- illustration shapes --- //

      makeMadeline(true, madColor, {
        addTo: illo,
      })
      makeMadeline(false, badColor, {
        addTo: illo,
        rotate: { y: TAU / 2 },
      })

      // ----- feather ----- //

      var feather = new Zdog.Group({
          addTo: illo,
          rotate: { y: -TAU / 4 },
        })

      ;(function() {
        var featherPartCount = 8
        var radius = 12
        var angleX = TAU / featherPartCount / 2
        var sector = (TAU * radius) / 2 / featherPartCount

        for (var i = 0; i < featherPartCount; i++) {
          var curve = Math.cos(((i / featherPartCount) * TAU * 3) / 4 + (TAU * 1) / 4)
          var x = 4 - curve * 2
          var y0 = sector / 2
          // var y2 = -sector/2;
          var isLast = i == featherPartCount - 1
          var y3 = isLast ? sector * -1 : -y0
          var z1 = -radius + 2 + curve * -1.5
          var z2 = isLast ? -radius : -radius
          var barb = new Zdog.Shape({
            path: [
              { x: 0, y: y0, z: -radius },
              { x: x, y: -sector / 2, z: z1 },
              { x: x, y: (-sector * 3) / 4, z: z1 },
              { x: 0, y: y3, z: z2 },
            ],
            addTo: feather,
            rotate: { x: angleX * -i + TAU / 8 },
            stroke: 1,
            color: featherGold,
            fill: true,
          })
          barb.copy({
            scale: { x: -1 },
          })
        }

        // rachis
        var rachis = new Zdog.Ellipse({
          addTo: feather,
          diameter: radius * 2,
          quarters: 2,
          rotate: { y: -TAU / 4 },
          stroke: 2,
          color: featherGold,
        })
        rachis.copy({
          stroke: 8,
          color: glow,
          rotate: { y: -TAU / 4, x: -0.5 },
        })
      })()

      // ----- rods ----- //
      ;(function() {
        var rodCount = 14
        for (var i = 0; i < rodCount; i++) {
          var zRotor = new Zdog.Anchor({
            addTo: illo,
            rotate: { z: (TAU / rodCount) * i },
          })

          var y0 = 32
          var y1 = y0 + 2 + Math.random() * 24
          new BokehShape({
            path: [{ y: y0 }, { y: y1 }],
            addTo: zRotor,
            rotate: { x: ((Math.random() * 2 - 1) * TAU) / 8 },
            color: madColor.skin,
            stroke: 1,
            bokehSize: 6,
            bokehLimit: 70,
          })
        }
      })()

      // dots
      ;(function() {
        var dotCount = 64

        for (var i = 0; i < dotCount; i++) {
          var yRotor = new Zdog.Anchor({
            addTo: illo,
            rotate: { y: (TAU / dotCount) * i },
          })

          new BokehShape({
            path: [{ z: 40 * (1 - Math.random() * Math.random()) + 32 }],
            addTo: yRotor,
            rotate: { x: ((Math.random() * 2 - 1) * TAU * 3) / 16 },
            color: badColor.skin,
            stroke: 1 + Math.random(),
            bokehSize: 6,
            bokehLimit: 74,
          })
        }
      })()

      // ----- birds ----- //

      var birdRotor = new Zdog.Anchor({
        addTo: illo,
        rotate: { y: (TAU * -1) / 8 },
      })

      makeBird({
        addTo: birdRotor,
        color: madColor.parkaLight,
        spin: TAU / 2,
      })

      makeBird({
        addTo: birdRotor,
        color: featherGold,
        spin: (-TAU * 3) / 8,
      })

      makeBird({
        addTo: birdRotor,
        color: 'white',
        spin: -TAU / 4,
      })

      makeBird({
        addTo: birdRotor,
        color: madColor.hair,
        spin: -TAU / 8,
      })

      makeBird({
        addTo: birdRotor,
        color: madColor.parkaDark,
        spin: TAU / 8,
      })

      // -- animate --- //

      var isSpinning = true
      var rotateSpeed = -TAU / 60
      var xClock = 0
      var then = new Date() - 1 / 60

      function animate() {
        update()
        illo.renderGraph()
        requestAnimationFrame(animate)
      }

      animate()

      // -- update -- //

      function update() {
        var now = new Date()
        var delta = now - then
        // auto rotate
        if (isSpinning) {
          var theta = (rotateSpeed / 60) * delta * -1
          illo.rotate.y += theta
          xClock += theta / 4
          illo.rotate.x = (Math.sin(xClock) * TAU) / 12
        }

        illo.updateGraph()

        then = now
      }
    },

  },
}
</script>

<style lang='scss' scoped>
.login {
  height: 100vh;
  background-image: linear-gradient(to bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 70%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  background: rgba(0, 0, 0, 0.3);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginPart h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.loginPart .inputbox {
  position: relative;
}

.loginPart .inputElement input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;
  /*背景颜色为透明*/
}

.login {
  width: 100%;
  height: 100%;
}

//
.divs {
  position: relative;
}

.inputs {
  width: 100%;
  padding: 20px 0;
  color: white;
  font-size: inherit;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom-color: hsla(185, 100%, 62%, 0.2);
}

.inputs:focus {
  outline: none;
}

.inputs::placeholder {
  color: hsla(0, 0%, 100%, 0.6);
}

.divs span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #3cefff;
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.inputs:focus ~ span {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.page-login-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;

  button {
    z-index: 1;
    font-size: inherit;
    font-family: inherit;
    color: #fff;
    width: 150px;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: #00B4F4;
    border-radius: 5px;

  }

  button:hover {
    cursor: pointer;
    animation: jelly 0.5s;
  }
}


@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
</style>
